<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="com.surekam.mnai.model.*"%>
<%@ page import="com.surekam.mnai.web.Pagination"%>
<%@ include file="/common/taglibs.jsp"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<title>手机号码归属信息管理</title>
<%@ include file="/common/meta.jsp"%>
<script src="${ctx}/js/jquery.js" type="text/javascript"></script>
<script src="${ctx}/js/jquery.form.js" type="text/javascript"></script>

<!-- include jqueryUi -->
<script src="${ctx}/js/jquery-ui-1.8.16.custom.min.js"
	type="text/javascript"></script>
<link href="${ctx}/css/jquery-ui-1.8.16.custom.css" type="text/css"
	rel="stylesheet" />
<script src="${ctx}/js/jquery-ui-timepicker-addon.js"
	type="text/javascript"></script>
<script src="${ctx}/js/jauery-ui-datepicker-zh-CN.js"
	type="text/javascript"></script>
<link href="${ctx}/css/jquery-ui-timepicker.css" type="text/css"
	rel="stylesheet" />
<script src="${ctx}/js/jQselect.js" type="text/javascript"></script>
<script src="${ctx}/js/yj_main.js" type="text/javascript"></script>
<script src="${ctx}/js/address.select.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/css/right.css"
	media="screen" />
<style>
.yj_table3 th,.yj_table3 td {
	padding: 3px 8px 3px 8px;
}
</style>
<script type="text/javascript">
	/**
	 * 清空查询条件
	 */
	$(function() {
		$("#clear").click(function() {
			$("#mobileNumber").val("");

			var provinceSelect = document.getElementById("province");
			provinceSelect.selectedIndex = 0;

			var citySelect = document.getElementById("city");
			clearSelect(citySelect);
			citySelect.add(new Option("请选择城市...", ""));
		});
	});

	$(function() {
		$("#cancle").click(function() {
			$(".ui-icon").click();
		});
	});
	
	/**
	*对手机号码(段)的输入数据进行判断 by【caoxu】
	*/
	$(function(){
		$("#mobileNumber").blur(function(){
			var value = $(this).val();
			if(value.length == 0){
				return ;
			}
			isRight = true;
			if(isNaN(value)){
				alert("输入的值要为全数字形式！");
				isRight = false;
			}else if(value.length < 7 || value.length > 11){
				alert("长度要是7-11");
				isRight = false;
			}
			if(!isRight){
				this.value = "";
				this.focus();
			}
		});
	});
	function submitForm() {
		var form = document.getElementById("queryForm");
		form.submit();
	}

	function initProvince() {
		initProvinceSelect(document.getElementById("province"));
	}

	function changeProvince(selectedProvince) {
		initCitySelect(selectedProvince, document.getElementById("city"));
	}
	
	function delNumber(mns) {
		if(window.confirm("是否删除?")) {
			$.ajax({
				url: "${ctx}/mobile/manage",
				type: "POST",
				data: {
					"operation": "delete",
					"mobileNumberSegment": mns
				},
				dataType: 'json',
				success: function(){
					submitForm();
	            },
	            error: function(){
	            	alert("删除失败!");
	            }
			});
		}
	}
	
	function getRiskList(){
		$.ajax({
			url: "/survey/rest/surveyRisk/getSurveyRiskList",
			type: "GET",
			data: {
				"startTime": $("#startTime").val(),
				"endTime": $("#endTime").val(),
				"dealstate": $("#dealstate").val()
			},
			dataType: 'json',
			success: function(result){
				getSurveyRiskList(result);
            },
            error: function(){
            	alert("get surveyRisk list failed!");
            }
		});
	}
	
	
</script>
</head>
<body onload="initProvince()">
	<form id="queryForm" name="queryForm" method="get"
		action="${ctx}/mobile/manage">
		<input type="hidden" id="operation" name="operation" value="retrieve" />
		<ul class="yj_formul2" style="width: 100%;">
			<li><label>手机号码(段)：</label> <input id="mobileNumber"
				name="mobileNumber" type="text" class="yj_othfld4"
				style="width: 130px;"></input></li>
			<li><label>所属省份：</label> <select id="province" name="province"
				onchange="changeProvince(this.value)" class="selectbox">
					<option selected="selected" value="">请选择省份...</option>
			</select></li>
			<li><label>所属城市：</label> <select id="city" name="city"
				class="selectbox">
					<option selected="selected" value="">请选择城市...</option>
			</select></li>
			<li style="width: 60px; margin-left: 20px;"><a
				id="queryAttribution" href="#" onclick="submitForm()"
				class="yj_button2">查询</a></li>
			<li style="width: 60px; margin-left: 20px;"><a id="clear"
				href="#" class="yj_button2">清空</a></li>
		</ul>
	</form>

	<div class="clearfix"></div>
	<div class="yj_pannel2">
		<dl class="yj_top">
			<dt>
				<a id="addMobile" href="./addMobile.jsp" class="yj_addlink">新增</a>
			</dt>
			<dd></dd>
		</dl>
		<div class="yj_center">
			<table id="table" class="yj_table1">
				<thead>
					<tr>
						<th>手机号码段</th>
						<th>手机卡类型</th>
						<th>所属省份</th>
						<th>所属城市</th>
						<th>区号</th>
						<th>邮政编码</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach var="mobile" items="${pagination.iterator}">
						<tr>
							<td><c:out value="${mobile.mobileNumberSegment}"></c:out></td>
							<td><c:out value="${mobile.phoneCardType}"></c:out></td>
							<td><c:out value="${mobile.address.province}"></c:out></td>
							<td><c:out value="${mobile.address.city}"></c:out></td>
							<td><c:out value="${mobile.address.areaCode}"></c:out></td>
							<td><c:out value="${mobile.address.postCode}"></c:out></td>
							<td><a class="yj_editlink" href="./editMobile.jsp?mobileNumberSegment=${mobile.mobileNumberSegment}"
								title="修改">修改</a> <a class="yj_dellink1" href="#"
								onclick="delNumber(${mobile.mobileNumberSegment})" title="删除">删除</a></td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
		<dl class="yj_bottom">
			<dt></dt>
			<dd></dd>
		</dl>
		<div class="clearfix"></div>

		<div class="yj_pagelist">
			<a href="#" class="yj_pre">上一页</a> <a href="#">1</a> <a href="#">2</a>
			<a href="#">3</a> <a href="#">4</a> <a href="#">5</a> ... <a href="#"
				class="yj_next">下一页</a>
		</div>
	</div>
</body>
</html>
